<script setup>
  import { computed, ref } from 'vue'
  import { getlogisticsInfoApi } from '@/server/address'

  // 胶囊距离顶部的距离
  let top = 0

  // #ifdef MP-WEIXIN
  const menuButton = uni.getMenuButtonBoundingClientRect()
  top = menuButton.top - (50 - menuButton.height) / 2 + 'px'
  // #endif

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }

  // 接收参数
  const props = defineProps(['id'])

  // 地址信息
  const logisticsInfo = ref({})

  // // 起点终点标记
  const markers = ref([])

  // //路线信息
  const polyline = ref([])

  // // 地图中心点
  const center = ref({})

  // 获取订单详情信息
  async function getLogisticsInfo() {
    const { data } = await getlogisticsInfoApi(props.id)

    logisticsInfo.value = data.data

    // 标记点
    markers.value = [
      {
        id: 1,
        latitude: logisticsInfo.value.logisticsInfo[0].latitude,
        longitude: logisticsInfo.value.logisticsInfo[0].longitude,
        iconPath: '/static/images/start.png',
        width: 25,
        height: 30,
      },
      {
        id: 2,
        latitude:
          logisticsInfo.value.logisticsInfo[
            logisticsInfo.value.logisticsInfo.length - 1
          ].latitude,
        longitude:
          logisticsInfo.value.logisticsInfo[
            logisticsInfo.value.logisticsInfo.length - 1
          ].longitude,
        iconPath: '/static/images/end.png',
        width: 25,
        height: 30,
      },
    ]

    // console.log(Object.values(logisticsInfo.value.logisticsInfo[0]).join(','))
    // 获取地图信息
    uniCloud.callFunction({
      name: 'qq-map',
      data: {
        from: Object.values(logisticsInfo.value.logisticsInfo[0]).join(','),
        to: Object.values(
          logisticsInfo.value.logisticsInfo[
            logisticsInfo.value.logisticsInfo.length - 1
          ]
        ).join(','),
      },
      success(res) {
        const coors = res.result.result.routes[0].polyline

        for (let i = 2; i < coors.length; i++) {
          coors[i] = coors[i - 2] + coors[i] / 1000000
        }

        const points = []

        for (let i = 0; i < coors.length; i += 2) {
          points.push({ latitude: coors[i], longitude: coors[i + 1] })
        }

        // // 地图中心点
        center.value = points[100]

        // 货车信息
        markers.value.push({
          id: 3,
          latitude: center.value.latitude,
          longitude: center.value.longitude,
          iconPath: '/static/images/car.png',
          width: 25,
          height: 30,
        })

        // 路线
        polyline.value.push({
          points,
          color: '#16c2a3',
          width: 5,
        })
      },
    })
  }
  getLogisticsInfo()
</script>

<template>
  <view class="timeline-page">
    <map
      :latitude="center.latitude"
      :longitude="center.longitude"
      :polyline="polyline"
      :markers="markers"
      class="uni-map"
      scale="8"
      enable-zoom
    />
    <cover-view :style="{ paddingTop: top }" class="navigator-bar">
      <cover-view @click="onBackClick" class="icon-back">
        <cover-image src="/static/images/icon-back.png" />
      </cover-view>

      <cover-view class="title">派送中</cover-view>
    </cover-view>
    <cover-view class="timeline-meta">
      <cover-view class="status">订单派送中</cover-view>
      <cover-view class="extra">
        预计明天送达 {{ logisticsInfo.name }} {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <!--  -->
        <view class="line" v-for="item in logisticsInfo.list" :key="item.id">
          <view
            v-if="item.status === 1 || item.status === 2 || item.status === 3"
            class="badge dot"
          ></view>

          <view class="badge icon" v-if="item.status === 4">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-truck"
            />
          </view>

          <view class="badge icon" v-if="item.status === 5">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-checked"
            />
          </view>
          <!-- <view class="badge text">123</view> -->
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">
            {{ item.content }}
          </view>
          <view class="time">{{ item.createTime }}</view>
        </view>

        <!--        <view class="line">
          <view class="badge icon">
            <uni-icons
              custom-prefix="iconfont"
              color="#2cb5a5"
              size="15"
              type="icon-checked"
            />
          </view>
          <view class="label">已签收</view>
          <view class="content">
            您的订单已由本人签收。如有疑问请联系配送员【赵赵，18332566962】确认。感谢您在优医购用，欢迎再次光临。
          </view>
          <view class="time">今天 10：25</view>
        </view>
        <view class="line">
          <view class="badge icon">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-truck"
            />
          </view>
          <view class="label">派送中</view>
          <view class="content">
            您的订单正在派送中【深圳市】科技园派送员宋平正在为您派件
          </view>
          <view class="time">今天 10：25</view>
        </view>
        <view class="line">
          <view class="badge dot"></view>
          <view class="label">运输中</view>
          <view class="content"> 在广东深圳公司进行发出扫描 </view>
          <view class="time">今天 10：25</view>
        </view>
        <view class="line">
          <view class="badge dot"></view>
          <view class="content"> 在分拨中心广东深圳公司进行卸车扫描 </view>
          <view class="time">今天 10：25</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
